<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath %>">
<title>fileUpload.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all">

</head>

<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>常规使用：普通图片上传</legend>
	</fieldset>

	<div class="layui-upload">
		<button type="button" class="layui-btn" id="test1">上传图片</button>
		<div class="layui-upload-list">
			<img class="layui-upload-img" width = "60px" height = "60px" id="demo1">
			<p id="demoText"></p>
		</div>
	</div>
</body>
<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['jquery','layer','form','table','laydate','upload'],function(){
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var upload = layui.upload;
			
		  //普通图片上传,之后进行预览的方法
		  var uploadInst = upload.render({
		    elem: '#test1' //指的是按钮的id
		    ,url: 'file/getPictureMessage.do'//跳转的路径
		    ,field: 'mf'
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){//result应该指的是图片的路径地址
		        $('#demo1').attr('src', result); //图片链接（base64）attr方法单个参数是获取当前属性的值，当是两个参数的时候就代表的是重新设置当前的属性的值
		      });
		    }
		    ,done: function(res){//这个地方的参数指的是上传成功之后返回Map集合中的对象的内容信息
		    alert(res);
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功 
		      alert("上传成功");
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
	})
</script>
</html>
